import React from 'react'
import { Col, Row,Button, Checkbox, Form, Input  } from 'antd';
import style from './login.module.scss'
import bgLeft from '../../assets/images/bg-left.png'
import Header from '../../components/header/Header';
import down from '../../assets/images/3.png'
import { useNavigate } from 'react-router-dom';
// import { NavLink } from 'react-router-dom';
// import classnames from 'classnames'
import api from '../../api/index'
//导入store仓库
import {connect} from 'react-redux'

 function Login(props) {
   
  const navigate = useNavigate()
  const onFinish = (values) => {
    console.log('Success:', values);
    // 网络请求
      api.getLogin({
        username:values.username,
        password:values.password
      }).then(res=>{
        console.log(res.data);
        if(res.data.status===200){
           let data={
          username:res.data.user,
          token:res.data.token,
          isLogin:true
        }
        props.setuser(data)
        localStorage.setItem('user',JSON.stringify(data))
        navigate('/')
      
        }else{
          // 信息提示
        }
       
      })
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  
  // 定义函数
  function tiao(){
      navigate('/singup')
  }
  
  return (
    <div className={style.bg}>
      <Header title='登入'/>
      <div className={style.content}>
        <div className={style.container}>
        <Row>
          <Col span={8}>
            <img src={bgLeft} alt="" width='386'/>
          </Col>
          <Col span={16}>
            <div className={style.loginBox}>
              <div className={style.register} onClick={tiao}>
               {/* <NavLink to='/singup'><span>注册</span></NavLink>  */}
               <span>注册</span>
              </div>
              <div className={style.weixin}>
                <div className={style.cb1}>
                  <p className={style.title}>扫码登陆</p>
                  <img src={down} alt="" />
                  <div className={style.bottom}> 使用阿里云APP/支付宝/钉钉/ <br />下载阿里云App,上云更轻松
                  </div>
                </div>
              </div>
            <div className={style.login}>
            <Form
                    name="basic"
                    labelCol={{
                      span: 4,
                    }}
                    wrapperCol={{
                      span: 20,
                    }}
                    initialValues={{
                      remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                  >
                    <Form.Item
                      label="账号"
                      name="username"
                      rules={[
                        {
                          required: true,
                          message: '请输入账号!',
                        },
                      ]}
                      hasFeedback
                    >
                      <Input />
                        
                      
                    </Form.Item>

                    <Form.Item
                      label="密码"
                      name="password"
                      rules={[
                        {
                          required: true,
                          message: '请输入密码',
                        },
                      ]}
                      hasFeedback
                    >
                      <Input.Password />
                    </Form.Item>

                    <Form.Item
                      name="remember"
                      valuePropName="checked"
                      wrapperCol={{
                        offset: 4,
                        span: 16,
                      }}
                    >
                      <Checkbox>记住密码</Checkbox>
                    </Form.Item>

                    <Form.Item
                      wrapperCol={{
                        offset: 4,
                        span: 20,
                      }}
                    >
                      <Button type="primary" htmlType="submit" block>
                        Submit
                      </Button>
                    </Form.Item>
            </Form>
            </div>
            </div>
          </Col>
          
        </Row>
        </div>
      </div>
     <div className={style.footer}>
      nh
     </div>
    </div>
  )
}
export default connect(null,dispatch=>{
  return{
    setuser:(val)=>dispatch({type:'setuser',payload:val})
  }
})(Login)